<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Pilot 015</title>
  <link rel="stylesheet" href="css/015.css" type="text/css" />
  <script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var maxSize   = 25;
      var minSize   = 12;
      var deepColor = "000000";
      var lowColor  = "DDDDDD";

      var totalTags = $("#wrapper").children().size();
      var offset    = Math.floor((maxSize - minSize)/totalTags);

      for (var i = 0; i < totalTags; i++) {
        var fontSize = maxSize - offset * i;
        var fontSize = fontSize + "px";
        var tag      = $("#wrapper > a:eq(" + i + ")");
        tag.css("font-size",fontSize);
        tag.css("color",getColorByScale(i,totalTags));
      }

      function hex2dec(hex) {
        return parseInt(hex,16);
      }

      function dec2hex(dec) {
        return dec.toString(16);
      }

      function getColorByScale(i, totalCount) {
        var minr = hex2dec(lowColor.substr(0,2));
        var ming = hex2dec(lowColor.substr(2,2));
        var minb = hex2dec(lowColor.substr(4,2));

        var maxr = hex2dec(deepColor.substr(0,2));
        var maxg = hex2dec(deepColor.substr(2,2));
        var maxb = hex2dec(deepColor.substr(4,2));

        var r = dec2hex(parseInt(maxr - (maxr - minr) * i / totalCount));
        var g = dec2hex(parseInt(maxg - (maxg - ming) * i / totalCount));
        var b = dec2hex(parseInt(maxb - (maxb - minb) * i / totalCount));

        if (r.length == 1) r = "0" + r;
        if (g.length == 1) g = "0" + g;
        if (b.length == 1) b = "0" + b;

        return "#" + r + g + b;
      }
    });
  </script>
</head>
<body>
  <!-- we will add our HTML content here -->
  <div id="wrapper">
    <a href="#">001</a>
    <a href="#">002</a>
    <a href="#">003</a>
    <a href="#">004</a>
    <a href="#">005</a>
    <a href="#">006</a>
    <a href="#">007</a>
    <a href="#">008</a>
    <a href="#">009</a>
    <a href="#">010</a>
  </div>
</body>
</html>
